// 1.createVNode 生成虚拟dom节点
// 2.render 把createVNode生成的虚拟dom节点渲染到真实的dom中
//          render(VNode.挂载的目标元素)
import { createVNode, render } from 'vue'
import Message from './message.vue'

export function message ({ type, text }) {
  // 浏览器原生标签节点
  // const h1Vnode = createVNode('h1', {}, 'this is h1')
  // 组件虚拟dom
  const MessageVnode = createVNode(Message, { type, text })
  // 动态生成一个容器
  const container = document.createElement('div')
  // 添加到容器中
  document.body.appendChild(container)
  // setTimeout(() => {
  //   在 template 标签中加<div id="container"></div>
  //   render(h1Vnode, document.getElementsByName('container'))
  //   render(MessageVnode, document.getElementsByName('container'))
  // }, 40)
  render(MessageVnode, container)
  // 优化 显示1.5秒后隐藏
  setTimeout(() => {
    render(null, container)
  }, 1500)
}
